<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DeepSeek - 智能对话</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- Tailwind配置 -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#3B82F6", // 主色调：蓝色
              secondary: "#10B981", // 辅助色：绿色
              accent: "#8B5CF6", // 强调色：紫色
              dark: {
                50: "#4B5563",
                100: "#374151",
                200: "#1F2937",
                300: "#111827",
                400: "#030712",
              },
              light: {
                50: "#F9FAFB",
                100: "#F3F4F6",
                200: "#E5E7EB",
                300: "#D1D5DB",
              },
            },
            fontFamily: {
              sans: ["Inter", "system-ui", "sans-serif"],
              mono: ["JetBrains Mono", "monospace"],
            },
            animation: {
              "fade-in": "fadeIn 0.3s ease-out",
              "slide-up": "slideUp 0.3s ease-out",
              "pulse-soft": "pulseSoft 1.5s infinite",
            },
            keyframes: {
              fadeIn: {
                "0%": { opacity: "0" },
                "100%": { opacity: "1" },
              },
              slideUp: {
                "0%": { transform: "translateY(10px)", opacity: "0" },
                "100%": { transform: "translateY(0)", opacity: "1" },
              },
              pulseSoft: {
                "0%, 100%": { opacity: "1" },
                "50%": { opacity: "0.5" },
              },
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .scrollbar-thin {
          scrollbar-width: thin;
        }
        .scrollbar-hide {
          scrollbar-width: none;
          -ms-overflow-style: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .text-gradient {
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    </style>

    <style>
      /* 基础样式 */
      body {
        transition: background-color 0.3s ease;
      }

      /* 滚动条样式 */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      ::-webkit-scrollbar-track {
        background: transparent;
      }

      ::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
        border-radius: 3px;
      }

      .dark ::-webkit-scrollbar-thumb {
        background-color: rgba(75, 85, 99, 0.5);
      }

      /* 打字动画 */
      .typing-indicator span {
        height: 8px;
        width: 8px;
        float: left;
        margin: 0 1px;
        background-color: #9e9ea1;
        border-radius: 50%;
        display: block;
        animation: typing 1.4s infinite ease-in-out both;
      }

      .dark .typing-indicator span {
        background-color: #6b7280;
      }

      .typing-indicator span:nth-child(1) {
        animation-delay: 0s;
      }

      .typing-indicator span:nth-child(2) {
        animation-delay: 0.2s;
      }

      .typing-indicator span:nth-child(3) {
        animation-delay: 0.4s;
      }

      @keyframes typing {
        0% {
          transform: translateY(0px);
        }
        28% {
          transform: translateY(-5px);
        }
        44% {
          transform: translateY(0px);
        }
      }
    </style>
  </head>

  <body
    class="bg-light-50 text-gray-800 dark:bg-dark-300 dark:text-gray-100 h-screen flex flex-col overflow-hidden"
  >
    <!-- 顶部导航栏 -->
    <header
      class="bg-white dark:bg-dark-200 border-b border-light-200 dark:border-dark-100 py-3 px-4 sm:px-6 transition-all duration-300 z-10"
    >
      <div class="flex items-center justify-between">
        <!-- 左侧Logo和标题 -->
        <div class="flex items-center space-x-3">
          <button
            id="sidebar-toggle"
            class="p-2 rounded-md text-gray-500 hover:bg-light-100 dark:hover:bg-dark-100 md:hidden transition-colors"
          >
            <i class="fa fa-bars"></i>
          </button>
          <div class="flex items-center space-x-2">
            <div
              class="w-8 h-8 bg-gradient-to-r from-primary to-accent rounded-lg flex items-center justify-center"
            >
              <span class="text-white font-bold text-lg">D</span>
            </div>
            <h1 class="text-lg font-semibold hidden sm:block">DeepSeek</h1>
          </div>
        </div>

        <!-- 右侧控制区 -->
        <div class="flex items-center space-x-3">
          <!-- 搜索按钮 -->
          <button
            class="p-2 rounded-full hover:bg-light-100 dark:hover:bg-dark-100 text-gray-500 transition-colors relative"
          >
            <i class="fa fa-search"></i>
          </button>

          <!-- 通知按钮 -->
          <button
            class="p-2 rounded-full hover:bg-light-100 dark:hover:bg-dark-100 text-gray-500 transition-colors relative"
          >
            <i class="fa fa-bell-o"></i>
            <span
              class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"
            ></span>
          </button>

          <!-- 主题切换 -->
          <button
            id="theme-toggle"
            class="p-2 rounded-full hover:bg-light-100 dark:hover:bg-dark-100 text-gray-500 transition-colors"
          >
            <i class="fa fa-sun-o text-yellow-500 block dark:hidden"></i>
            <i class="fa fa-moon-o text-blue-300 hidden dark:block"></i>
          </button>

          <!-- 用户头像 -->
          <div class="relative group">
            <button
              class="w-8 h-8 rounded-full bg-gray-200 dark:bg-dark-100 overflow-hidden flex items-center justify-center hover:ring-2 hover:ring-primary/50 transition-all"
              onclick="toggleDropdown(event)"
            >
              <!-- src="https://picsum.photos/id/64/200/200" -->
              <img
                src="./avatar.jpg"
                alt="用户头像"
                class="w-full h-full object-cover"
              />
            </button>

            <!-- 用户菜单 -->
            <div
              class="absolute right-0 mt-2 w-48 bg-white dark:bg-dark-200 rounded-lg shadow-lg py-2 z-20 hidden group-hover:block animate-fade-in border border-light-200 dark:border-dark-100"
            >
              <a
                href="#"
                class="block px-4 py-2 text-sm hover:bg-light-100 dark:hover:bg-dark-100 transition-colors"
              >
                <i class="fa fa-user-o mr-2"></i>个人资料
              </a>
              <a
                href="#"
                class="block px-4 py-2 text-sm hover:bg-light-100 dark:hover:bg-dark-100 transition-colors"
              >
                <i class="fa fa-cog mr-2"></i>设置
              </a>
              <div
                class="border-t border-light-200 dark:border-dark-100 my-1"
              ></div>
              <a
                href="#"
                class="block px-4 py-2 text-sm text-red-500 hover:bg-light-100 dark:hover:bg-dark-100 transition-colors"
              >
                <i class="fa fa-sign-out mr-2"></i>退出登录
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <div class="flex flex-1 overflow-hidden">
      <!-- 左侧会话列表 -->
      <aside
        id="sidebar"
        class="w-64 bg-white dark:bg-dark-200 border-r border-light-200 dark:border-dark-100 flex-shrink-0 flex flex-col transition-all duration-300 transform -translate-x-full md:translate-x-0 fixed md:static h-[calc(100vh-61px)] z-20"
      >
        <!-- 新建会话按钮 -->
        <div class="p-4 border-b border-light-200 dark:border-dark-100">
          <button
            id="new-chat"
            class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors flex items-center justify-center"
          >
            <i class="fa fa-plus mr-2"></i>新会话
          </button>
        </div>

        <!-- 会话列表 -->
        <div class="flex-1 overflow-y-auto scrollbar-thin p-2">
          <h3
            class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 py-2"
          >
            最近会话
          </h3>

          <!-- 会话项 - 当前选中 -->
          <div
            class="chat-item bg-primary/10 dark:bg-primary/20 rounded-lg p-3 mb-1 cursor-pointer hover:bg-primary/15 dark:hover:bg-primary/25 transition-colors border-l-4 border-primary"
          >
            <div class="flex items-start justify-between">
              <p class="text-sm font-medium truncate max-w-[160px]">
                介绍一下DeepSeek的功能
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400"
                >今天 14:30</span
              >
            </div>
            <p
              class="text-xs text-gray-600 dark:text-gray-300 truncate mt-1 max-w-[180px]"
            >
              DeepSeek是一个强大的AI交互平台，提供智能对话、内容生成...
            </p>
          </div>

          <!-- 会话项 -->
          <div
            class="chat-item bg-light-100 dark:bg-dark-100 rounded-lg p-3 mb-1 cursor-pointer hover:bg-light-200 dark:hover:bg-dark-50 transition-colors"
          >
            <div class="flex items-start justify-between">
              <p class="text-sm font-medium truncate max-w-[160px]">
                帮我写一篇关于AI的短文
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400"
                >昨天 09:15</span
              >
            </div>
            <p
              class="text-xs text-gray-600 dark:text-gray-300 truncate mt-1 max-w-[180px]"
            >
              人工智能（AI）是近年来科技领域最热门的话题之一...
            </p>
          </div>

          <div
            class="chat-item bg-light-100 dark:bg-dark-100 rounded-lg p-3 mb-1 cursor-pointer hover:bg-light-200 dark:hover:bg-dark-50 transition-colors"
          >
            <div class="flex items-start justify-between">
              <p class="text-sm font-medium truncate max-w-[160px]">
                解释一下量子计算的基本概念
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400"
                >昨天 08:42</span
              >
            </div>
            <p
              class="text-xs text-gray-600 dark:text-gray-300 truncate mt-1 max-w-[180px]"
            >
              量子计算是一种利用量子力学原理进行信息处理的计算方式...
            </p>
          </div>

          <div
            class="chat-item bg-light-100 dark:bg-dark-100 rounded-lg p-3 mb-1 cursor-pointer hover:bg-light-200 dark:hover:bg-dark-50 transition-colors"
          >
            <div class="flex items-start justify-between">
              <p class="text-sm font-medium truncate max-w-[160px]">
                推荐几本机器学习的入门书籍
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400"
                >3天前</span
              >
            </div>
            <p
              class="text-xs text-gray-600 dark:text-gray-300 truncate mt-1 max-w-[180px]"
            >
              以下是几本机器学习入门的经典书籍推荐...
            </p>
          </div>

          <div
            class="chat-item bg-light-100 dark:bg-dark-100 rounded-lg p-3 mb-1 cursor-pointer hover:bg-light-200 dark:hover:bg-dark-50 transition-colors"
          >
            <div class="flex items-start justify-between">
              <p class="text-sm font-medium truncate max-w-[160px]">
                如何提高编程效率？
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400">上周</span>
            </div>
            <p
              class="text-xs text-gray-600 dark:text-gray-300 truncate mt-1 max-w-[180px]"
            >
              提高编程效率需要结合良好的习惯、工具和方法...
            </p>
          </div>

          <h3
            class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 py-2 mt-4"
          >
            收藏会话
          </h3>

          <div
            class="chat-item bg-light-100 dark:bg-dark-100 rounded-lg p-3 mb-1 cursor-pointer hover:bg-light-200 dark:hover:bg-dark-50 transition-colors"
          >
            <div class="flex items-start justify-between">
              <p class="text-sm font-medium truncate max-w-[160px]">
                Python数据分析教程
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400"
                >2周前</span
              >
            </div>
            <p
              class="text-xs text-gray-600 dark:text-gray-300 truncate mt-1 max-w-[180px]"
            >
              Python是数据分析的强大工具，以下是使用pandas进行数据分析的基础教程...
            </p>
          </div>
        </div>

        <!-- 侧边栏底部 -->
        <div class="p-3 border-t border-light-200 dark:border-dark-100">
          <button
            class="w-full text-left text-sm text-gray-600 dark:text-gray-300 hover:bg-light-100 dark:hover:bg-dark-100 p-2 rounded-lg transition-colors flex items-center"
          >
            <i class="fa fa-trash-o mr-2 text-gray-500"></i>
            <span>清除所有会话</span>
          </button>
        </div>
      </aside>

      <!-- 遮罩层 - 移动端侧边栏打开时显示 -->
      <div
        id="sidebar-overlay"
        class="fixed inset-0 bg-black/50 z-10 hidden md:hidden"
      ></div>

      <!-- 右侧聊天区域 -->
      <main class="flex-1 flex flex-col overflow-hidden">
        <!-- 聊天内容区 -->
        <div
          id="chat-container"
          class="flex-1 overflow-y-auto p-4 sm:p-6 md:p-8 space-y-6 scrollbar-thin"
        >
          <!-- 欢迎消息 -->
          <div class="flex items-start gap-4 animate-slide-up">
            <div
              class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex-shrink-0 flex items-center justify-center text-white font-bold"
            >
              D
            </div>
            <div class="max-w-3xl">
              <div
                class="bg-white dark:bg-dark-200 rounded-2xl rounded-tl-none p-4 shadow-sm"
              >
                <p class="mb-3">
                  你好！我是DeepSeek智能助手，很高兴为你服务。我可以帮你：
                </p>
                <ul class="list-disc pl-5 space-y-1 mb-3">
                  <li>解答各种问题</li>
                  <li>生成文章、代码、邮件等内容</li>
                  <li>提供学习建议和指导</li>
                  <li>协助数据分析和处理</li>
                </ul>
                <p>有什么我可以帮助你的吗？</p>
              </div>
              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                今天 14:28
              </p>
            </div>
          </div>

          <!-- 用户消息 -->
          <div class="flex items-start gap-4 justify-end animate-slide-up">
            <div class="max-w-3xl">
              <div
                class="bg-primary text-white rounded-2xl rounded-tr-none p-4 shadow-sm"
              >
                <p>你好，能详细介绍一下DeepSeek的主要功能吗？</p>
              </div>
              <p
                class="text-xs text-gray-500 dark:text-gray-400 mt-1 text-right"
              >
                今天 14:30
              </p>
            </div>
            <div
              class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-100 overflow-hidden flex-shrink-0"
            >
              <!-- src="https://picsum.photos/id/64/200/200" -->
              <img
                src="./avatar.jpg"
                alt="用户头像"
                class="w-full h-full object-cover"
              />
            </div>
          </div>

          <!-- AI回复 -->
          <div class="flex items-start gap-4 animate-slide-up">
            <div
              class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex-shrink-0 flex items-center justify-center text-white font-bold"
            >
              D
            </div>
            <div class="max-w-3xl">
              <div
                class="bg-white dark:bg-dark-200 rounded-2xl rounded-tl-none p-4 shadow-sm"
              >
                <p class="mb-3">
                  DeepSeek 是一个功能强大的AI助手平台，主要功能包括：
                </p>

                <h4 class="font-semibold mb-2 mt-4">1. 智能对话</h4>
                <p class="mb-3">
                  能够理解上下文进行自然对话，回答各种问题，提供信息咨询和建议。支持多轮对话，理解复杂指令。
                </p>

                <h4 class="font-semibold mb-2 mt-4">2. 内容生成</h4>
                <p class="mb-3">
                  可以生成各种类型的文本内容，包括文章、邮件、代码、诗歌、故事等。支持根据特定要求调整内容风格和长度。
                </p>

                <h4 class="font-semibold mb-2 mt-4">3. 知识问答</h4>
                <p class="mb-3">
                  拥有广泛的知识库，能够解答科学、技术、历史、文化等多个领域的问题，并提供详细解释。
                </p>

                <h4 class="font-semibold mb-2 mt-4">4. 学习辅助</h4>
                <p>
                  提供学习资源推荐、概念解释、问题解答等功能，帮助用户更高效地学习新知识和技能。
                </p>
              </div>
              <div class="flex items-center gap-2 mt-1">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                  今天 14:32
                </p>
                <button
                  class="text-xs text-gray-500 hover:text-primary transition-colors"
                >
                  <i class="fa fa-thumbs-o-up"></i>
                </button>
                <button
                  class="text-xs text-gray-500 hover:text-primary transition-colors"
                >
                  <i class="fa fa-thumbs-o-down"></i>
                </button>
                <button
                  class="text-xs text-gray-500 hover:text-primary transition-colors"
                >
                  <i class="fa fa-copy"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 用户消息 -->
          <div class="flex items-start gap-4 justify-end animate-slide-up">
            <div class="max-w-3xl">
              <div
                class="bg-primary text-white rounded-2xl rounded-tr-none p-4 shadow-sm"
              >
                <p>DeepSeek的API如何使用？有什么限制吗？</p>
              </div>
              <p
                class="text-xs text-gray-500 dark:text-gray-400 mt-1 text-right"
              >
                今天 14:35
              </p>
            </div>
            <div
              class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-100 overflow-hidden flex-shrink-0"
            >
              <!-- src="https://picsum.photos/id/64/200/200" -->
              <img
                src="./avatar.jpg"
                alt="用户头像"
                class="w-full h-full object-cover"
              />
            </div>
          </div>

          <!-- AI正在输入 -->
          <div class="flex items-start gap-4 animate-slide-up">
            <div
              class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex-shrink-0 flex items-center justify-center text-white font-bold"
            >
              D
            </div>
            <div class="max-w-3xl">
              <div
                class="bg-white dark:bg-dark-200 rounded-2xl rounded-tl-none p-4 shadow-sm inline-block"
              >
                <div class="typing-indicator">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 输入区域 -->
        <div
          class="border-t border-light-200 dark:border-dark-100 p-4 bg-white dark:bg-dark-200 transition-colors"
        >
          <div class="max-w-3xl mx-auto">
            <!-- 输入工具栏 -->
            <div class="flex items-center gap-2 mb-2 px-2">
              <button
                class="p-2 rounded-md text-gray-500 hover:bg-light-100 dark:hover:bg-dark-100 transition-colors"
                title="上传文件"
              >
                <i class="fa fa-paperclip"></i>
              </button>
              <button
                class="p-2 rounded-md text-gray-500 hover:bg-light-100 dark:hover:bg-dark-100 transition-colors"
                title="插入图片"
              >
                <i class="fa fa-image"></i>
              </button>
              <button
                class="p-2 rounded-md text-gray-500 hover:bg-light-100 dark:hover:bg-dark-100 transition-colors"
                title="插入代码"
              >
                <i class="fa fa-code"></i>
              </button>
              <button
                class="p-2 rounded-md text-gray-500 hover:bg-light-100 dark:hover:bg-dark-100 transition-colors"
                title="语音输入"
              >
                <i class="fa fa-microphone"></i>
              </button>
              <div class="flex-1"></div>
              <button
                class="p-2 rounded-md text-gray-500 hover:bg-light-100 dark:hover:bg-dark-100 transition-colors"
                title="更多选项"
              >
                <i class="fa fa-ellipsis-h"></i>
              </button>
            </div>

            <!-- 输入框 -->
            <div class="relative">
              <textarea
                id="message-input"
                placeholder="输入你的问题..."
                class="w-full bg-light-100 dark:bg-dark-100 rounded-lg p-4 pr-16 focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none transition-all min-h-[80px] max-h-[300px] overflow-y-auto scrollbar-thin"
              ></textarea>

              <!-- 发送按钮 -->
              <button
                id="send-button"
                class="absolute right-2 bottom-2 w-10 h-10 bg-primary hover:bg-primary/90 text-white rounded-full flex items-center justify-center transition-colors shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <i class="fa fa-paper-plane-o"></i>
              </button>
            </div>

            <!-- 提示和状态 -->
            <div
              class="flex items-center justify-between mt-2 text-xs text-gray-500 dark:text-gray-400"
            >
              <p>按 Shift + Enter 换行，按 Enter 发送</p>
              <p>已使用 3/1000 次</p>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 快捷命令浮动按钮 -->
    <button
      id="quick-commands"
      class="fixed bottom-24 right-6 md:bottom-6 bg-white dark:bg-dark-200 shadow-lg rounded-full w-12 h-12 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-light-100 dark:hover:bg-dark-100 transition-all md:hidden z-10"
    >
      <i class="fa fa-lightbulb-o"></i>
    </button>

    <!-- 快捷命令面板 -->
    <div
      id="commands-panel"
      class="fixed bottom-44 right-6 bg-white dark:bg-dark-200 rounded-xl shadow-xl p-4 w-64 hidden animate-fade-in md:hidden z-10 border border-light-200 dark:border-dark-100"
    >
      <h3 class="text-sm font-semibold mb-3">快捷命令</h3>
      <div class="space-y-2">
        <button
          class="quick-command w-full text-left text-sm p-2 hover:bg-light-100 dark:hover:bg-dark-100 rounded-lg transition-colors"
          data-command="帮我总结今天的对话内容"
        >
          总结对话内容
        </button>
        <button
          class="quick-command w-full text-left text-sm p-2 hover:bg-light-100 dark:hover:bg-dark-100 rounded-lg transition-colors"
          data-command="将回答内容翻译成英文"
        >
          翻译成英文
        </button>
        <button
          class="quick-command w-full text-left text-sm p-2 hover:bg-light-100 dark:hover:bg-dark-100 rounded-lg transition-colors"
          data-command="解释得更简单一些"
        >
          解释得更简单
        </button>
        <button
          class="quick-command w-full text-left text-sm p-2 hover:bg-light-100 dark:hover:bg-dark-100 rounded-lg transition-colors"
          data-command="保存当前会话"
        >
          保存当前会话
        </button>
      </div>
    </div>

    <!-- JavaScript -->
    <script>
      // 主题切换功能
      const themeToggle = document.getElementById("theme-toggle");
      const htmlElement = document.documentElement;

      // 检查本地存储中的主题偏好
      if (
        localStorage.theme === "dark" ||
        (!("theme" in localStorage) &&
          window.matchMedia("(prefers-color-scheme: dark)").matches)
      ) {
        htmlElement.classList.add("dark");
      } else {
        htmlElement.classList.remove("dark");
      }

      // 切换主题
      themeToggle.addEventListener("click", () => {
        htmlElement.classList.toggle("dark");

        // 保存主题偏好到本地存储
        if (htmlElement.classList.contains("dark")) {
          localStorage.theme = "dark";
        } else {
          localStorage.theme = "light";
        }
      });

      // 侧边栏切换（移动端）
      const sidebarToggle = document.getElementById("sidebar-toggle");
      const sidebar = document.getElementById("sidebar");
      const sidebarOverlay = document.getElementById("sidebar-overlay");

      function openSidebar() {
        sidebar.classList.remove("-translate-x-full");
        sidebarOverlay.classList.remove("hidden");
        document.body.style.overflow = "hidden";
      }

      function closeSidebar() {
        sidebar.classList.add("-translate-x-full");
        sidebarOverlay.classList.add("hidden");
        document.body.style.overflow = "";
      }

      sidebarToggle.addEventListener("click", openSidebar);
      sidebarOverlay.addEventListener("click", closeSidebar);

      function toggleDropdown(event) {
        event.stopPropagation();
        const dropdown = event.currentTarget.nextElementSibling;
        dropdown.classList.toggle("hidden");
      }

      // 会话项点击事件
      const chatItems = document.querySelectorAll(".chat-item");
      chatItems.forEach((item) => {
        item.addEventListener("click", () => {
          // 移除所有会话项的选中状态
          chatItems.forEach((i) => {
            i.classList.remove(
              "bg-primary/10",
              "dark:bg-primary/20",
              "border-l-4",
              "border-primary"
            );
            i.classList.add("bg-light-100", "dark:bg-dark-100");
          });

          // 设置当前会话项为选中状态
          item.classList.remove("bg-light-100", "dark:bg-dark-100");
          item.classList.add(
            "bg-primary/10",
            "dark:bg-primary/20",
            "border-l-4",
            "border-primary"
          );

          // 在移动设备上点击会话后关闭侧边栏
          if (window.innerWidth < 768) {
            closeSidebar();
          }
        });
      });

      // 快捷命令面板切换
      const quickCommandsBtn = document.getElementById("quick-commands");
      const commandsPanel = document.getElementById("commands-panel");

      quickCommandsBtn.addEventListener("click", () => {
        commandsPanel.classList.toggle("hidden");
      });

      // 点击快捷命令填充到输入框
      const quickCommands = document.querySelectorAll(".quick-command");
      const messageInput = document.getElementById("message-input");

      quickCommands.forEach((command) => {
        command.addEventListener("click", () => {
          const commandText = command.getAttribute("data-command");
          messageInput.value = commandText;
          commandsPanel.classList.add("hidden");

          // 聚焦到输入框
          messageInput.focus();
        });
      });

      // 发送消息功能
      const sendButton = document.getElementById("send-button");
      const chatContainer = document.getElementById("chat-container");

      // 预设回复
      const replies = {
        "DeepSeek的API如何使用？有什么限制吗？":
          "DeepSeek API的使用非常简单，主要步骤包括：\n\n1. 在控制台创建API密钥\n2. 参考API文档，使用你的密钥进行认证\n3. 发送HTTP请求到相应的API端点\n\nAPI调用示例（Python）：\n```python\nimport requests\n\nurl = 'https://api.deepseek.com/v1/chat/completions'\nheaders = {\n    'Authorization': 'Bearer YOUR_API_KEY',\n    'Content-Type': 'application/json'\n}\ndata = {\n    'model': 'deepseek-chat',\n    'messages': [{'role': 'user', 'content': 'Hello!'}]\n}\n\nresponse = requests.post(url, json=data)\nprint(response.json())\n```\n\n使用限制根据你的订阅计划有所不同：\n- 免费用户：每分钟最多5次调用，每天100次\n- 专业版：每分钟最多30次调用，每天1000次\n- 企业版：可定制更高的调用限额",
      };

      // 发送消息函数
      function sendMessage() {
        const message = messageInput.value.trim();
        if (!message) return;

        // 获取当前时间
        const now = new Date();
        const timeString = `${now.getHours()}:${now
          .getMinutes()
          .toString()
          .padStart(2, "0")}`;

        // 添加用户消息到聊天容器
        const userMessageHtml = `
        <div class="flex items-start gap-4 justify-end animate-slide-up">
          <div class="max-w-3xl">
            <div class="bg-primary text-white rounded-2xl rounded-tr-none p-4 shadow-sm">
              <p>${message}</p>
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 text-right">今天 ${timeString}</p>
          </div>
          <div class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-100 overflow-hidden flex-shrink-0">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full object-cover">
          </div>
        </div>
      `;

        // 移除AI正在输入的指示器（如果存在）
        const typingIndicator = chatContainer
          .querySelector(".typing-indicator")
          .closest("div.flex");
        if (typingIndicator) {
          typingIndicator.remove();
        }

        // 添加用户消息
        chatContainer.insertAdjacentHTML("beforeend", userMessageHtml);

        // 清空输入框
        messageInput.value = "";

        // 滚动到底部
        scrollToBottom();

        // 显示AI正在输入
        const typingHtml = `
        <div class="flex items-start gap-4 animate-slide-up">
          <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex-shrink-0 flex items-center justify-center text-white font-bold">D</div>
          <div class="max-w-3xl">
            <div class="bg-white dark:bg-dark-200 rounded-2xl rounded-tl-none p-4 shadow-sm inline-block">
              <div class="typing-indicator">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </div>
        </div>
      `;
        chatContainer.insertAdjacentHTML("beforeend", typingHtml);
        scrollToBottom();

        // 模拟AI思考后回复
        setTimeout(() => {
          // 再次移除AI正在输入的指示器
          const newTypingIndicator = chatContainer
            .querySelector(".typing-indicator")
            .closest("div.flex");
          if (newTypingIndicator) {
            newTypingIndicator.remove();
          }

          // 获取AI回复
          const aiResponse =
            replies[message] ||
            "感谢你的提问！这是一个示例回复。在实际应用中，这里会显示AI生成的回答内容。";

          // 格式化回复内容（简单处理换行）
          const formattedResponse = aiResponse.replace(/\n/g, "<br>");

          // 添加AI回复
          const aiMessageHtml = `
          <div class="flex items-start gap-4 animate-slide-up">
            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex-shrink-0 flex items-center justify-center text-white font-bold">D</div>
            <div class="max-w-3xl">
              <div class="bg-white dark:bg-dark-200 rounded-2xl rounded-tl-none p-4 shadow-sm">
                <p>${formattedResponse}</p>
              </div>
              <div class="flex items-center gap-2 mt-1">
                <p class="text-xs text-gray-500 dark:text-gray-400">今天 ${timeString}</p>
                <button class="text-xs text-gray-500 hover:text-primary transition-colors">
                  <i class="fa fa-thumbs-o-up"></i>
                </button>
                <button class="text-xs text-gray-500 hover:text-primary transition-colors">
                  <i class="fa fa-thumbs-o-down"></i>
                </button>
                <button class="text-xs text-gray-500 hover:text-primary transition-colors">
                  <i class="fa fa-copy"></i>
                </button>
              </div>
            </div>
          </div>
        `;
          chatContainer.insertAdjacentHTML("beforeend", aiMessageHtml);

          // 滚动到底部
          scrollToBottom();
        }, 2000);
      }

      // 发送按钮点击事件
      sendButton.addEventListener("click", sendMessage);

      // 输入框键盘事件
      messageInput.addEventListener("keydown", (e) => {
        // 按Enter发送消息，Shift+Enter换行
        if (e.key === "Enter" && !e.shiftKey) {
          e.preventDefault();
          sendMessage();
        }

        // 动态调整输入框高度
        adjustTextareaHeight();
      });

      // 调整文本框高度
      function adjustTextareaHeight() {
        const textarea = messageInput;
        textarea.style.height = "auto";
        const scrollHeight = textarea.scrollHeight;
        // 限制最小和最大高度
        if (scrollHeight < 80) {
          textarea.style.height = "80px";
        } else if (scrollHeight > 300) {
          textarea.style.height = "300px";
        } else {
          textarea.style.height = `${scrollHeight}px`;
        }
      }

      // 初始化文本框高度
      adjustTextareaHeight();

      // 滚动到聊天底部
      function scrollToBottom() {
        const container = chatContainer;
        container.scrollTop = container.scrollHeight;
      }

      // 新会话按钮
      document.getElementById("new-chat").addEventListener("click", () => {
        // 清空聊天内容
        chatContainer.innerHTML = "";

        // 添加欢迎消息
        const welcomeHtml = `
        <div class="flex items-start gap-4 animate-slide-up">
          <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-accent flex-shrink-0 flex items-center justify-center text-white font-bold">D</div>
          <div class="max-w-3xl">
            <div class="bg-white dark:bg-dark-200 rounded-2xl rounded-tl-none p-4 shadow-sm">
              <p>你好！我是DeepSeek智能助手，很高兴为你开始新的会话。有什么我可以帮助你的吗？</p>
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">今天 ${new Date().getHours()}:${new Date()
          .getMinutes()
          .toString()
          .padStart(2, "0")}</p>
          </div>
        </div>
      `;
        chatContainer.insertAdjacentHTML("beforeend", welcomeHtml);

        // 滚动到底部
        scrollToBottom();

        // 在移动设备上关闭侧边栏
        if (window.innerWidth < 768) {
          closeSidebar();
        }

        // 重置会话选中状态
        chatItems.forEach((i) => {
          i.classList.remove(
            "bg-primary/10",
            "dark:bg-primary/20",
            "border-l-4",
            "border-primary"
          );
          i.classList.add("bg-light-100", "dark:bg-dark-100");
        });
      });

      // 点击页面其他区域关闭快捷命令面板
      document.addEventListener("click", (e) => {
        const isClickInside =
          quickCommandsBtn.contains(e.target) ||
          commandsPanel.contains(e.target);
        if (!isClickInside) {
          commandsPanel.classList.add("hidden");
        }
      });
    </script>
  </body>
</html>
